import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 所有的数据列表
    list: [],
    // 文本框内容
    inputVal: 'aaa',
    // 下一个ID
    nextID: 5,
    // 视图关键字
    viewKey: 'all'
  },
  mutations: {
    // 接收一个数组，用于给state.list数据列表赋值
    initList(state, list) {
      state.list = list
    },
    // 给state.inputVal赋值
    setInputValue(state, val) {
      state.inputVal = val
    },
    // 添加列表项
    addItem(state) {
      // 添加参数对象
      const obj = {
        id: state.nextID,
        info: state.inputVal.trim(),
        done: false
      }
      // 将参数对象添加到数组中
      state.list.push(obj)
      state.nextID++
      // 清空输入框
      state.inputVal = ''
    },
    // 删除列表项
    removeItem(state, itemId) {
      // 根据itemId查找对应项的索引
      const index = state.list.findIndex(item => item.id === itemId)
      // 根据索引删除对应项
      if (index !== -1) state.list.splice(index, 1)
    },
    // 复选框选中
    checkedChange(state, param) {
      // 根据当前点击的item索引
      const index = state.list.findIndex(item => item.id === param.itemId)
      // 更改state.done中的值
      if (index !== -1) state.list[index].done = param.status
    },
    // 清除已完成列表项
    cleanDone(state) {
      state.list = state.list.filter(item => item.done === false)
    },
    // 修改视图关键字
    changeViewKey(state, Key) {
      state.viewKey = Key
    }
  },
  actions: {
    async getList(context) {
      // 发起请求
      const { data } = await axios.get('/list.json')
      // 调用mutations的initList方法
      context.commit('initList', data)
    }
  },
  getters: {
    // 统计未完成任务的条数
    unDoneLength(state) {
      return state.list.filter(item => item.done === false).length
    },
    // 任务列表
    infoList(state) {
      if (state.viewKey === 'all') return state.list
      if (state.viewKey === 'undone') return state.list.filter(item => item.done === false)
      if (state.viewKey === 'done') return state.list.filter(item => item.done === true)
      return state.list
    }
  }
})
